<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { 
  User, 
  UserFilled, 
  Check, 
  Setting, 
  Message,
  Plus,
  ArrowDown,
  SwitchButton,
  ChatDotRound
} from '@element-plus/icons-vue'

// 当前激活的菜单
const activeMenu = ref('account')

// 账号列表数据
const accountList = ref([
  {
    id: 1,
    username: '张三',
    email: 'zhangsan@example.com',
    status: '正常',
    createTime: '2024-01-15'
  },
  {
    id: 2,
    username: '李四',
    email: 'lisi@example.com',
    status: '禁用',
    createTime: '2024-01-16'
  },
  {
    id: 3,
    username: '王五',
    email: 'wangwu@example.com',
    status: '正常',
    createTime: '2024-01-17'
  }
])

// 群组列表数据
const groupList = ref([
  {
    id: 1,
    name: '技术交流群',
    memberCount: 120,
    createTime: '2024-01-10'
  },
  {
    id: 2,
    name: '产品讨论组',
    memberCount: 85,
    createTime: '2024-01-12'
  },
  {
    id: 3,
    name: '客服团队',
    memberCount: 45,
    createTime: '2024-01-14'
  }
])

// 待审核账号列表
const pendingAccounts = ref([
  {
    id: 1,
    username: '赵六',
    email: 'zhaoliu@example.com',
    applyTime: '2024-01-18 10:30:00',
    reason: '发布违规内容，多次发布广告信息',
    reportCount: 5
  },
  {
    id: 2,
    username: '钱七',
    email: 'qianqi@example.com',
    applyTime: '2024-01-18 14:20:00',
    reason: '恶意骚扰其他用户，言语攻击',
    reportCount: 3
  }
])

// 客服消息列表
const serviceMessages = ref([
  {
    id: 1,
    username: '用户A',
    time: '2024-01-18 09:15:00',
    content: '你们的产品什么时候可以支持移动端？',
    reply: ''
  },
  {
    id: 2,
    username: '用户B',
    time: '2024-01-18 11:30:00',
    content: '账号登录有问题，一直提示密码错误',
    reply: ''
  },
  {
    id: 3,
    username: '用户C',
    time: '2024-01-18 15:45:00',
    content: '能否增加一个批量导入的功能？',
    reply: ''
  }
])

// 个人信息表单
const userForm = ref({
  username: 'admin',
  email: 'admin@example.com',
  phone: '13800138000',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
})

// 聊天记录数据
const chatRecords = ref([
  {
    id: 1,
    fromUser: '张三',
    toUser: '李四',
    lastMessage: '我已经把文件发给你了，请查收',
    time: '2024-01-18 10:30:00',
    unread: 0,
    fromAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    toAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    messages: [
      { id: 1, content: '李四，在吗？', time: '2024-01-18 10:25:00', fromId: 1, sender: '张三' },
      { id: 2, content: '在的，怎么了？', time: '2024-01-18 10:26:00', fromId: 2, sender: '李四' },
      { id: 3, content: '我需要你发一下上次的项目文档', time: '2024-01-18 10:27:00', fromId: 1, sender: '张三' },
      { id: 4, content: '好的，我找一下', time: '2024-01-18 10:28:00', fromId: 2, sender: '李四' },
      { id: 5, content: '我已经把文件发给你了，请查收', time: '2024-01-18 10:30:00', fromId: 1, sender: '张三' }
    ]
  },
  {
    id: 2,
    fromUser: '王五',
    toUser: '赵六',
    lastMessage: '我们下午三点开会，别忘了',
    time: '2024-01-18 11:30:00',
    unread: 0,
    fromAvatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9cpng.png',
    toAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    messages: [
      { id: 1, content: '赵六，下午有时间吗？', time: '2024-01-18 11:20:00', fromId: 3, sender: '王五' },
      { id: 2, content: '什么事？', time: '2024-01-18 11:22:00', fromId: 4, sender: '赵六' },
      { id: 3, content: '产品部要开会讨论新功能', time: '2024-01-18 11:25:00', fromId: 3, sender: '王五' },
      { id: 4, content: '几点？', time: '2024-01-18 11:27:00', fromId: 4, sender: '赵六' },
      { id: 5, content: '我们下午三点开会，别忘了', time: '2024-01-18 11:30:00', fromId: 3, sender: '王五' }
    ]
  },
  {
    id: 3,
    fromUser: '钱七',
    toUser: '孙八',
    lastMessage: '这个问题我们需要找技术团队确认一下',
    time: '2024-01-18 15:45:00',
    unread: 0,
    fromAvatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    toAvatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9cpng.png',
    messages: [
      { id: 1, content: '刚才客户反馈的问题你看到了吗？', time: '2024-01-18 15:30:00', fromId: 5, sender: '钱七' },
      { id: 2, content: '看到了，很奇怪的一个bug', time: '2024-01-18 15:35:00', fromId: 6, sender: '孙八' },
      { id: 3, content: '你有头绪吗？', time: '2024-01-18 15:38:00', fromId: 5, sender: '钱七' },
      { id: 4, content: '我觉得可能是服务器配置问题', time: '2024-01-18 15:40:00', fromId: 6, sender: '孙八' },
      { id: 5, content: '这个问题我们需要找技术团队确认一下', time: '2024-01-18 15:45:00', fromId: 5, sender: '钱七' }
    ]
  }
])

// 当前选中的聊天
const currentChat = ref(null)

// 查看消息详情变量
const showChatDetail = ref(false)
const selectedMessage = ref(null)

// 聊天筛选条件
const searchChatText = ref('')
const chatFilter = ref('all')

// 选择聊天
const selectChat = (chat) => {
  currentChat.value = chat
}

// 查看消息详情
const viewMessageDetail = (msg) => {
  selectedMessage.value = msg
  showChatDetail.value = true
}

// 关闭消息详情
const closeMessageDetail = () => {
  showChatDetail.value = false
}

// 标记消息
const flagMessage = (chat, msgId, flagged) => {
  if (!chat) return
  const msg = chat.messages.find(m => m.id === msgId)
  if (msg) {
    msg.flagged = flagged
    ElMessage.success(flagged ? '已标记消息' : '已取消标记')
  }
}

// 删除消息
const deleteMessage = (chat, msgId) => {
  if (!chat) return
  const index = chat.messages.findIndex(m => m.id === msgId)
  if (index !== -1) {
    chat.messages.splice(index, 1)
    ElMessage.success('消息已删除')
  }
}

// 导出聊天记录
const exportChatHistory = (chat) => {
  if (!chat) return
  ElMessage.success('聊天记录导出成功')
}

// 发送消息
const sendMessage = () => {
  if (!newMessage.value.trim() || !currentChat.value) return
  
  // 添加新消息
  currentChat.value.messages.push({
    id: currentChat.value.messages.length + 1,
    content: newMessage.value,
    time: new Date().toLocaleString(),
    isUser: false
  })
  
  // 更新最后一条消息
  currentChat.value.lastMessage = newMessage.value
  currentChat.value.time = new Date().toLocaleString()
  
  // 清空输入框
  newMessage.value = ''
  
  ElMessage.success('消息发送成功')
}

// 添加下拉框状态控制
const isDropdownOpen = ref(false)

// 切换下拉框显示状态
const toggleDropdown = () => {
  isDropdownOpen.value = !isDropdownOpen.value
}

// 点击外部关闭下拉框
const closeDropdown = (event) => {
  if (!event.target.closest('.admin-info')) {
    isDropdownOpen.value = false
  }
}

// 添加全局点击事件监听
onMounted(() => {
  document.addEventListener('click', closeDropdown)
})

onUnmounted(() => {
  document.removeEventListener('click', closeDropdown)
})

// 处理账号审核
const handleAudit = (id, status) => {
  // TODO: 实现审核逻辑
  ElMessage.success('审核操作成功')
}

// 更新个人信息
const updateUserInfo = () => {
  // TODO: 实现更新逻辑
  ElMessage.success('个人信息更新成功')
}

// 回复客服消息
const replyMessage = (id, content) => {
  // TODO: 实现回复逻辑
  ElMessage.success('回复成功')
}

// 添加路由实例
const router = useRouter()

// 添加退出登录方法
const handleLogout = () => {
  ElMessage.success('退出成功')
  // 跳转到登录页面
  router.push('/manage/login')
}

</script>

<template>
  <div class="manage-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="logo">
        <h2>管理系统</h2>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="menu"
        @select="(index) => activeMenu = index">
        <el-menu-item index="account">
          <el-icon><User /></el-icon>
          <span>账号管理</span>
        </el-menu-item>
        <el-menu-item index="group">
          <el-icon><UserFilled /></el-icon>
          <span>群组管理</span>
        </el-menu-item>
        <el-menu-item index="audit">
          <el-icon><Check /></el-icon>
          <span>账号审核</span>
        </el-menu-item>
        <el-menu-item index="chat">
          <el-icon><ChatDotRound /></el-icon>
          <span>聊天管理</span>
        </el-menu-item>
        <el-menu-item index="profile">
          <el-icon><Setting /></el-icon>
          <span>个人信息</span>
        </el-menu-item>
        <el-menu-item index="service">
          <el-icon><Message /></el-icon>
          <span>客服回复</span>
        </el-menu-item>
      </el-menu>
      
      <!-- 管理员信息 -->
      <div class="admin-info" @click="toggleDropdown">
        <div class="admin-info-content">
          <el-avatar :size="40" :src="userForm.avatar" />
          <div class="admin-details">
            <div class="admin-name">{{ userForm.username }}</div>
            <div class="admin-role">系统管理员</div>
          </div>
          <el-icon class="dropdown-icon" :class="{ 'is-active': isDropdownOpen }">
            <ArrowDown />
          </el-icon>
        </div>
        <transition name="dropdown">
          <div class="custom-dropdown" v-show="isDropdownOpen">
            <div class="dropdown-item" @click="activeMenu = 'profile'">
              <el-icon><User /></el-icon>
              <span>个人信息</span>
            </div>
            <div class="dropdown-item" @click="handleLogout">
              <el-icon><SwitchButton /></el-icon>
              <span>退出登录</span>
            </div>
          </div>
        </transition>
      </div>
    </div>

    <!-- 主要内容区 -->
    <div class="main-content" :class="{ 'chat-active': activeMenu === 'chat' }">
      <!-- 账号管理 -->
      <div v-show="activeMenu === 'account'" class="content-section">
        <div class="section-header">
          <h3>账号管理</h3>
          <el-button type="primary">添加账号</el-button>
        </div>
        <el-table :data="accountList" border>
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="email" label="邮箱" />
          <el-table-column prop="status" label="状态" />
          <el-table-column label="操作">
            <template #default>
              <el-button type="primary" size="small">编辑</el-button>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 群组管理 -->
      <div v-show="activeMenu === 'group'" class="content-section">
        <div class="section-header">
          <h3>群组管理</h3>
          <el-button type="primary">创建群组</el-button>
        </div>
        <el-table :data="groupList" border>
          <el-table-column prop="name" label="群组名称" />
          <el-table-column prop="memberCount" label="成员数量" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作">
            <template #default>
              <el-button type="primary" size="small">管理成员</el-button>
              <el-button type="danger" size="small">解散群组</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 账号审核 -->
      <div v-show="activeMenu === 'audit'" class="content-section">
        <div class="section-header">
          <h3>账号审核</h3>
        </div>
        <el-table :data="pendingAccounts" border>
          <el-table-column prop="username" label="用户名" width="120" />
          <el-table-column prop="email" label="邮箱" width="200" />
          <el-table-column prop="applyTime" label="申请时间" width="160" />
          <el-table-column prop="reportCount" label="被举报次数" width="100" />
          <el-table-column prop="reason" label="投诉原因" show-overflow-tooltip>
            <template #default="scope">
              <el-tooltip
                effect="dark"
                :content="scope.row.reason"
                placement="top"
              >
                <span class="reason-text">{{ scope.row.reason }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template #default="scope">
              <el-button type="success" size="small" @click="handleAudit(scope.row.id, 'approve')">
                通过
              </el-button>
              <el-button type="danger" size="small" @click="handleAudit(scope.row.id, 'reject')">
                拒绝
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 个人信息 -->
      <div v-show="activeMenu === 'profile'" class="content-section">
        <div class="section-header">
          <h3>个人信息</h3>
        </div>
        <el-form :model="userForm" label-width="100px" class="user-form">
          <el-form-item label="用户名">
            <el-input v-model="userForm.username" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="userForm.email" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="userForm.phone" />
          </el-form-item>
          <el-form-item label="头像">
            <el-upload
              class="avatar-uploader"
              action="/api/upload"
              :show-file-list="false">
              <img v-if="userForm.avatar" :src="userForm.avatar" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateUserInfo">保存修改</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 客服回复 -->
      <div v-show="activeMenu === 'service'" class="content-section">
        <div class="section-header">
          <h3>客服消息</h3>
        </div>
        <div class="message-list">
          <div v-for="msg in serviceMessages" :key="msg.id" class="message-item">
            <div class="message-header">
              <span class="username">{{ msg.username }}</span>
              <span class="time">{{ msg.time }}</span>
            </div>
            <div class="message-content">{{ msg.content }}</div>
            <div class="message-reply">
              <el-input
                v-model="msg.reply"
                type="textarea"
                placeholder="请输入回复内容" />
              <el-button type="primary" @click="replyMessage(msg.id, msg.reply)">
                回复
              </el-button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 聊天管理 -->
      <div v-show="activeMenu === 'chat'" class="chat-section">
        <div class="section-header">
          <h3>聊天管理</h3>
          <div class="chat-filter-actions">
            <el-input
              v-model="searchChatText"
              placeholder="搜索用户或消息内容"
              prefix-icon="Search"
              clearable
              style="width: 250px; margin-right: 10px;"
            />
            <el-radio-group v-model="chatFilter" size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="flagged">已标记</el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="chat-container">
          <!-- 聊天列表 -->
          <div class="chat-list">
            <div 
              v-for="chat in chatRecords" 
              :key="chat.id" 
              class="chat-item" 
              :class="{ 
                'active': currentChat && currentChat.id === chat.id,
                'has-flagged': chat.messages.some(m => m.flagged)
              }"
              @click="selectChat(chat)">
              <div class="chat-avatars">
                <el-avatar :size="32" :src="chat.fromAvatar" class="from-avatar" />
                <el-avatar :size="32" :src="chat.toAvatar" class="to-avatar" />
              </div>
              <div class="chat-info">
                <div class="chat-header">
                  <div class="chat-users">
                    <span class="from-user">{{ chat.fromUser }}</span>
                    <span class="direction-arrow">→</span>
                    <span class="to-user">{{ chat.toUser }}</span>
                  </div>
                  <span class="chat-time">{{ chat.time }}</span>
                </div>
                <div class="chat-message">{{ chat.lastMessage }}</div>
              </div>
            </div>
          </div>
          
          <!-- 聊天内容 -->
          <div class="chat-content">
            <template v-if="currentChat">
              <div class="chat-toolbar">
                <div class="conversation-users">
                  <el-avatar :size="24" :src="currentChat.fromAvatar" class="toolbar-avatar" />
                  <span class="from-user-title">{{ currentChat.fromUser }}</span>
                  <span class="toolbar-separator">与</span>
                  <el-avatar :size="24" :src="currentChat.toAvatar" class="toolbar-avatar" />
                  <span class="to-user-title">{{ currentChat.toUser }}</span>
                  <span class="toolbar-separator">的对话</span>
                </div>
                <div class="chat-actions-toolbar">
                  <el-tag 
                    v-if="currentChat.messages.some(m => m.flagged)" 
                    type="danger" 
                    size="small" 
                    effect="dark"
                    style="margin-right: 10px;"
                  >
                    含有违规消息
                  </el-tag>
                  <el-button size="small" type="primary" @click="exportChatHistory(currentChat)">导出记录</el-button>
                </div>
              </div>
              
              <div class="chat-messages">
                <div class="message-date-divider">
                  <div class="date-line"></div>
                  <div class="date-content">{{ new Date(currentChat.messages[0]?.time || Date.now()).toLocaleDateString() }}</div>
                  <div class="date-line"></div>
                </div>
                
                <div 
                  v-for="msg in currentChat.messages" 
                  :key="msg.id" 
                  class="message-bubble" 
                  :class="{ 
                    'user-message': msg.fromId % 2 === 1, 
                    'other-message': msg.fromId % 2 === 0,
                    'flagged-message': msg.flagged
                  }">
                  <div class="message-header">
                    <div class="message-sender-info">
                      <img :src="msg.fromId % 2 === 1 ? currentChat.fromAvatar : currentChat.toAvatar" alt="Sender Avatar" class="sender-avatar">
                      <span class="sender-name">{{ msg.sender }}</span>
                    </div>
                    <div class="message-actions">
                      <el-button 
                        type="text" 
                        size="small" 
                        @click="viewMessageDetail(msg)">
                        详情
                      </el-button>
                      <el-button 
                        type="warning" 
                        size="small" 
                        @click="flagMessage(currentChat, msg.id, !msg.flagged)">
                        {{ msg.flagged ? '取消标记' : '标记' }}
                      </el-button>
                      <el-button 
                        type="danger" 
                        size="small" 
                        @click="deleteMessage(currentChat, msg.id)">
                        删除
                      </el-button>
                    </div>
                  </div>
                  <div class="message-content">{{ msg.content }}</div>
                  <div class="message-time">{{ msg.time }}</div>
                  <div v-if="msg.flagged" class="flag-indicator">
                    <el-tag type="danger" size="small">已标记</el-tag>
                  </div>
                </div>
              </div>
            </template>
            <div 
              v-else 
              class="no-chat-selected">
              <el-empty description="请选择一个聊天记录进行查看" />
              <p class="help-text">从左侧列表选择一个对话进行查看和管理</p>
            </div>
          </div>
          
          <!-- 消息详情弹窗 -->
          <el-dialog
            v-model="showChatDetail"
            title="消息详情"
            width="500px">
            <div v-if="selectedMessage" class="message-detail">
              <div class="detail-item">
                <div class="detail-label">发送者:</div>
                <div class="detail-value">{{ selectedMessage.sender }}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">发送时间:</div>
                <div class="detail-value">{{ selectedMessage.time }}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">消息内容:</div>
                <div class="detail-value message-content-detail">{{ selectedMessage.content }}</div>
              </div>
              <div class="detail-item">
                <div class="detail-label">状态:</div>
                <div class="detail-value">
                  <el-tag :type="selectedMessage.flagged ? 'danger' : 'success'">
                    {{ selectedMessage.flagged ? '已标记' : '正常' }}
                  </el-tag>
                </div>
              </div>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="closeMessageDetail">关闭</el-button>
                <el-button 
                  :type="selectedMessage?.flagged ? 'info' : 'warning'"
                  @click="flagMessage(currentChat, selectedMessage?.id, !selectedMessage?.flagged)">
                  {{ selectedMessage?.flagged ? '取消标记' : '标记违规' }}
                </el-button>
                <el-button type="danger" @click="deleteMessage(currentChat, selectedMessage?.id); closeMessageDetail()">
                  删除消息
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.manage-container {
  display: flex;
  min-height: 100vh;
  background: #f0f2f5;
}

.admin-info {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 15px;
  border-top: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 100;
}

.admin-info:hover {
  background: #f6f6f6;
}

.admin-info-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdown-icon {
  margin-left: auto;
  font-size: 12px;
  color: #909399;
  transition: transform 0.3s;
}

.dropdown-icon.is-active {
  transform: rotate(180deg);
}

/* 下拉框动画 */
.dropdown-enter-active,
.dropdown-leave-active {
  transition: all 0.3s ease;
  transform-origin: left top;
}

.dropdown-enter-from,
.dropdown-leave-to {
  opacity: 0;
  transform: scale(0.8) translateX(-10px);
}

.dropdown-enter-to,
.dropdown-leave-from {
  opacity: 1;
  transform: scale(1) translateX(0);
}

.custom-dropdown {
  position: absolute;
  top: 0;
  left: 100%;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  margin-left: 8px;
  min-width: 160px;
  overflow: hidden;
  transform-origin: left top;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
}

.dropdown-item:hover {
  background: #f5f7fa;
}

.dropdown-item .el-icon {
  font-size: 16px;
  color: #909399;
  flex-shrink: 0;
}

.dropdown-item span {
  font-size: 14px;
  color: #333;
}

.sidebar {
  width: 240px;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.05);
  position: relative;
  height: 100vh;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f0f0f0;
}

.logo h2 {
  margin: 0;
  color: var(--el-color-primary);
}

.menu {
  border-right: none;
}

.main-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-content.chat-active {
  padding: 0;
}

.content-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  color: #333;
}

.user-form {
  max-width: 600px;
  margin: 0 auto;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.message-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
}

.message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.username {
  font-weight: 500;
  color: #333;
}

.time {
  color: #999;
  font-size: 14px;
}

.message-content {
  margin-bottom: 16px;
  color: #666;
}

.message-reply {
  display: flex;
  gap: 12px;
}

.message-reply .el-input {
  flex: 1;
}

.reason-text {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 聊天管理样式 */
.chat-container {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
  flex: 1;
}

.chat-list {
  width: 280px;
  border-right: 1px solid #e4e7ed;
  overflow-y: auto;
  background-color: #f5f7fa;
  height: 100%;
}

.chat-item {
  display: flex;
  padding: 12px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
  transition: all 0.3s;
  align-items: center;
}

.chat-item:hover {
  background-color: #ecf5ff;
}

.chat-item.active {
  background-color: #ecf5ff;
  border-left: 3px solid #409EFF;
}

.chat-avatars {
  display: flex;
  margin-right: 12px;
  position: relative;
  width: 50px;
  height: 32px;
  flex-shrink: 0;
}

.from-avatar {
  position: absolute;
  left: 0;
  top: 0;
  border: 2px solid #fff;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.to-avatar {
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid #fff;
  z-index: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chat-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.chat-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  align-items: center;
}

.chat-users {
  display: flex;
  align-items: center;
  max-width: 180px;
  overflow: hidden;
}

.from-user, .to-user {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
  font-size: 13px;
}

.from-user {
  color: #409EFF;
}

.to-user {
  color: #67C23A;
}

.direction-arrow {
  margin: 0 5px;
  color: #909399;
  font-size: 12px;
}

.chat-time {
  font-size: 12px;
  color: #909399;
  flex-shrink: 0;
}

.chat-message {
  font-size: 13px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.chat-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ed;
  background-color: #f5f7fa;
}

.conversation-users {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toolbar-avatar {
  border: 2px solid #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.from-user-title {
  font-weight: 600;
  color: #409EFF;
}

.to-user-title {
  font-weight: 600;
  color: #67C23A;
}

.toolbar-separator {
  color: #909399;
  margin: 0 4px;
}

.chat-messages {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: #f8fafc;
}

.message-date-divider {
  display: flex;
  align-items: center;
  margin: 16px 0;
  color: #909399;
}

.date-line {
  flex: 1;
  height: 1px;
  background-color: #EBEEF5;
}

.date-content {
  padding: 0 10px;
  font-size: 12px;
  background-color: #f8fafc;
}

.message-bubble {
  max-width: 80%;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.user-message {
  align-self: flex-start;
  background-color: #fff;
  border-left: 3px solid #409EFF;
}

.other-message {
  align-self: flex-end;
  background-color: #fff;
  border-right: 3px solid #67C23A;
}

.message-sender-info {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.sender-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
  border: 1px solid #ebeef5;
}

.sender-name {
  font-weight: 500;
  color: #303133;
}

.message-content {
  font-size: 14px;
  line-height: 1.6;
  word-break: break-word;
  color: #303133;
}

.message-time {
  font-size: 12px;
  color: #909399;
  margin-top: 6px;
  text-align: right;
}

.message-actions {
  display: none;
  position: absolute;
  right: 10px;
  top: 5px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 2px 5px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.message-bubble:hover .message-actions {
  display: flex;
  gap: 5px;
}

.flagged-message {
  border: 1px solid #f56c6c;
  background-color: #fef0f0;
}

.flag-indicator {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
}

.chat-item.has-flagged {
  border-left: 3px solid #f56c6c;
  background-color: rgba(245, 108, 108, 0.1);
}

/* 调整无消息提示样式 */
.no-chat-selected {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
}

.help-text {
  font-size: 14px;
  color: #909399;
  margin-top: 16px;
}

/* 聊天管理新增样式 */
.chat-filter-actions {
  display: flex;
  align-items: center;
}

.chat-actions-toolbar {
  display: flex;
  align-items: center;
}

.message-bubble .el-button {
  padding: 4px 8px;
  min-height: auto;
}

.message-detail {
  padding: 10px;
}

.detail-item {
  margin-bottom: 15px;
  display: flex;
}

.detail-label {
  width: 80px;
  color: #606266;
  font-weight: 500;
}

.detail-value {
  flex: 1;
}

.message-content-detail {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-top: 5px;
  white-space: pre-wrap;
}

.chat-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  background: #fff;
}

.chat-section .section-header {
  padding: 15px 20px;
  border-bottom: 1px solid #e4e7ed;
  background-color: #fff;
  z-index: 10;
}
</style>


